<!--
 * @Author: your name
 * @Date: 2020-01-04 19:35:46
 * @LastEditTime : 2020-01-05 22:59:57
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \team9_shop\src\components\common\comment.vue
 -->
<template>
  <div>
    <h4>发表评论</h4>
    <hr />
    <!-- 发表评论区域 -->
    <van-cell-group>
      <van-field
        v-model="message"
        rows="2"
        :autosize="autoHeight"
        type="textarea"
        maxlength="144"
        placeholder="请输入留言"
        show-word-limit
      />
    </van-cell-group>
    <van-button type="info" class="btn" @click="commitComment">发表评论</van-button>
    <!-- 加载评论区域 -->
    <van-list v-for="(item, index) in commentList" :key="index">
      <div class="listBox">
        <span>第{{index+1}}楼</span>
        <span>用户:{{item.user_name}}</span>
        <span>发表时间:{{item.add_time.substring(0,10)}}</span>
      </div>
      <div class="textComent">{{item.content}}</div>
    </van-list>
    <!-- 加载更多评论 -->
    <van-button color="#f44" plain @click="getMoreComment">加载更多</van-button>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "comment",
  data() {
    return {
      //发表评论绑定数据
      message: "",
      autoHeight: {
        maxHeight: 200,
        minHeight: 50
      },
      // 加载评论绑定数据
      list: [],
      loading: false,
      finished: false,
      num: 0,
      // 获取评论列表数组
      commentList: [],
      // 获取评论页面参数
      page: 1
    };
  },
  computed: {
    ...mapState(["articleId"])
  },
  created() {
    this.getCommentList();
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true;
        }
      }, 500);
    },
    // 获取评论列表
    getCommentList() {
      const { data: res } = axios
        .get(`/api/getcomments/${this.articleId}?pageindex=${this.page}`)
        .then(res => {
          if (res.data.status !== 0) {
            return this.$toast.fail("获取评论信息失败");
          }
          this.commentList = res.data.message;
        });
    },
    // 点击加载更多按钮获取更多评论
    getMoreComment() {
      this.page++;
      const { data: res } = axios
        .get(`/api/getcomments/${this.articleId}?pageindex=${this.page}`)
        .then(res => {
          if (res.data.status !== 0) {
            return this.$toast.fail("获取评论信息失败");
          }
          console.log(res.data);
          this.commentList = [...this.commentList, ...res.data.message];
          console.log(this.commentList);
        });
    },
    // 点击发表评论按钮,发送请求提交评论
    commitComment() {
      if (this.message.trim().length === 0) {
        return this.$toast.fail("留言不能为空");
      } else {
        let params = new URLSearchParams();
        params.append("content", this.message);
        axios.post("/api/postcomment/" + this.articleId, params).then(res => {
          if (res.data.status !== 0) {
            return this.$toast.fail("发表评论失败");
          } else {
            return this.$toast.success("发表评论成功");
          }
        });
      }
      this.message = "";
    }
  }
};
</script>

<style lang="less" scoped>
.van-cell-group {
  border: 1px solid #ccc;
}
.btn {
  margin: 5px 0;
  width: 100%;
}
.listBox {
  display: flex;
  align-items: flex-start;
  background-color: #ccc;
}
.listBox span {
  margin: 6px;
  font-size: 12px;
}
.textComent {
  line-height: 35px;
  text-indent: 2em;
  font-size: 12px;
}
.van-button {
  width: 100%;
  margin: 5px 0;
  font-size: 14px;
}
</style>